<template>
  <el-descriptions
      class="margin-top"
      title="个人信息"
      :column="3"
      :size="size"
      border
  >
    <template #extra>
      <el-button type="primary" @click="$router.push('/user/update')">update</el-button>
      <el-button type="primary" @click="$router.push('/user/logout')">logout</el-button>
    </template>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          username
        </div>
      </template>
      {{ userInfo.username }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone/>
          </el-icon>
          Telephone
        </div>
      </template>
      {{ userInfo.phone }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location/>
          </el-icon>
          position
        </div>
      </template>
      {{ userInfo.position }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          id
        </div>
      </template>
      <el-tag size="small">{{ userInfo.id }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <office-building/>
          </el-icon>
          email
        </div>
      </template>
      {{ userInfo.email }}
    </el-descriptions-item>
  </el-descriptions>


</template>

<script lang="ts" setup>


import {UserStoreModule} from "@/store/modules/User";
import {IUser} from "@/store/pojo/IUser";

import {computed, ref} from 'vue'
import {
  User,
  Iphone,
  // eslint-disable-next-line no-unused-vars
  Location,
  Tickets,
  OfficeBuilding,
} from '@element-plus/icons-vue'





const userInfo: IUser = UserStoreModule.userInfoFromSessionStorage;


const size = ref('')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})


</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}
</style>